<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

   <!--
      http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
   -->
<input type="text" id="user">
   <ul>

   </ul>
  <script type="text/javascript">
      document.getElementById("user").addEventListener("input",function () {
          //获取input输入的value值
          var textValue=document.getElementById("user").value;
          //发起网络请求，请求需要展示的数据
          netRequest(textValue);
      });
      //发起跨域的网络请求
      function netRequest(str) {
        //1、创建script元素
          var sp=document.createElement("script");
          //2、创建连接地址
          sp.src="http://suggest.taobao.com/sug?code=utf-8&q="+str+"&callback=cb";
          //3、把新创建的元素添加到body里面
          document.body.appendChild(sp);
      }
      function cb(data) {
//          console.log(data);
          createEle(data.result);
      }
      //动态的创建dom元素的函数
      function createEle(obj) {
          //在动态的添加之前，把原有的li都给删除掉，否则会出现li叠加的情况
          var lis=document.getElementsByTagName("li");
          if(lis.length>0){
              document.getElementsByTagName("ul")[0].innerHTML="";
          }
          //遍历传递进来的数据，然后动态的创建li
         for(var x in obj){
             var liEle=document.createElement("li");
             var arrs=obj[x];
             //把获取到的每个小数组中的第一项赋值给动态创建的li
             liEle.innerHTML=arrs[0];
             document.getElementsByTagName("ul")[0].appendChild(liEle);
         }
      }




  </script>
</body>
</html>